<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能网站生成器 - 选择组件</title>
  <!-- 引入外部资源 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f8f9fa;
    }
    .header {
      background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
      color: white;
      padding: 60px 0;
      margin-bottom: 40px;
    }
    .component-card {
      border: 1px solid #dee2e6;
      border-radius: 8px;
      transition: all 0.3s ease;
      cursor: pointer;
      background-color: white;
      height: 100%;
    }
    .component-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .component-card.selected {
      border-color: #165DFF;
      box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
    }
    .component-card .card-body {
      padding: 20px;
    }
    .component-card .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: #1D2129;
    }
    .component-icon {
      font-size: 2rem;
      color: #165DFF;
      margin-bottom: 15px;
    }
    .btn-primary {
      background-color: #165DFF;
      border-color: #165DFF;
    }
    .btn-primary:hover {
      background-color: #0E4BDB;
      border-color: #0E4BDB;
    }
    .ai-feature {
      background-color: rgba(114, 46, 209, 0.1);
      border-left: 4px solid #722ED1;
      padding: 15px;
      margin: 20px 0;
    }
    .ai-feature h4 {
      color: #722ED1;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <!-- 头部 -->
  <header class="header">
    <div class="container">
      <div class="text-center">
        <h1 class="display-4 mb-4">智能网站生成器</h1>
        <p class="lead mb-0">选择您需要的组件，快速创建专业的企业网站</p>
      </div>
    </div>
  </header>

  <!-- 主要内容 -->
  <main class="container">
    <!-- AI功能介绍 -->
    <div class="ai-feature mb-8">
      <h4><i class="fa fa-magic mr-2"></i> AI辅助功能</h4>
      <p>我们的系统集成了先进的AI技术，可以智能生成各模块的JSON数据，为您的网站提供个性化内容。点击"AI生成"按钮，体验AI带来的便利！</p>
    </div>

    <!-- 组件选择表单 -->
    <form id="website-generator-form" action="/website/generate" method="post">
      <div class="row mb-6">
        <div class="col-md-6">
          <h2 class="h3 mb-3">选择组件</h2>
          <p>请从下方选择您需要的网站组件，点击卡片进行选择</p>
        </div>
        <div class="col-md-6 text-right">
          <button type="button" id="select-all" class="btn btn-secondary mr-2">全选</button>
          <button type="button" id="deselect-all" class="btn btn-secondary">取消全选</button>
        </div>
      </div>

      <!-- 组件列表 -->
      <div class="row" id="components-container">
        <!-- 组件将通过JavaScript动态加载 -->
      </div>

      <!-- 操作按钮 -->
      <div class="text-center mt-8 mb-12">
        <button type="submit" name="generate" class="btn btn-primary btn-lg">
          <i class="fa fa-cogs mr-2"></i> 生成网站
        </button>
      </div>
    </form>
  </main>

  <!-- AI生成模态框 -->
  <div class="modal fade" id="ai-generate-modal" tabindex="-1" role="dialog" aria-labelledby="ai-generate-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="ai-generate-modal-label">AI生成组件数据</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="modal-component-type" value="">
          <div class="form-group">
            <label for="ai-prompt">提示词 (选填)</label>
            <textarea class="form-control" id="ai-prompt" rows="3" placeholder="输入您对组件的特殊要求，例如：颜色、布局、内容方向等..."></textarea>
          </div>
          <div id="ai-loading" class="text-center" style="display: none;">
            <div class="spinner-border" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <p class="mt-2">AI正在生成组件数据，请稍候...</p>
          </div>
          <div id="ai-result" class="mt-4" style="display: none;">
            <h6>生成结果：</h6>
            <pre id="ai-result-data" class="bg-light p-3 rounded overflow-auto" style="max-height: 300px;"></pre>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="confirm-ai-generate">生成</button>
        </div>
      </div>
    </div>
  </div>

  <!-- JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 组件数据
    const components = [
      { type: 'navbar', name: '导航栏', icon: 'navicon' },
      { type: 'hero', name: '英雄区域', icon: 'star' },
      { type: 'services', name: '服务模块', icon: 'cogs' },
      { type: 'cases', name: '成功案例', icon: 'briefcase' },
      { type: 'about', name: '关于我们', icon: 'users' },
      { type: 'team', name: '团队介绍', icon: 'user-circle' },
      { type: 'stats', name: '数据统计', icon: 'bar-chart' },
      { type: 'pricing', name: '价格方案', icon: 'tag' },
      { type: 'faq', name: '常见问题', icon: 'question-circle' },
      { type: 'contact', name: '联系方式', icon: 'envelope' },
      { type: 'subscribe', name: '订阅模块', icon: 'mail-forward' },
      { type: 'footer', name: '页脚', icon: 'copyright' }
    ];

    $(document).ready(function() {
      // 渲染组件列表
      renderComponents();
      
      // 全选功能
      $('#select-all').click(function() {
        $('.component-checkbox').prop('checked', true);
        $('.component-card').addClass('selected');
      });
      
      // 取消全选功能
      $('#deselect-all').click(function() {
        $('.component-checkbox').prop('checked', false);
        $('.component-card').removeClass('selected');
      });
      
      // 提交表单
      $('#website-generator-form').submit(function(e) {
        // 检查是否至少选择了一个组件
        const selectedComponents = $('.component-checkbox:checked');
        if (selectedComponents.length === 0) {
          alert('请至少选择一个组件');
          e.preventDefault();
          return false;
        }
        
        // 表单将正常提交
      });

      // 组件选择功能
      $(document).on('click', '.component-card', function() {
        const $checkbox = $(this).find('.component-checkbox');
        $checkbox.prop('checked', !$checkbox.prop('checked'));
        $(this).toggleClass('selected', $checkbox.prop('checked'));
      });

      // 阻止复选框点击事件冒泡
      $(document).on('click', '.component-checkbox', function(e) {
        e.stopPropagation();
      });

      // AI生成按钮点击事件
      $(document).on('click', '.ai-generate-btn', function(e) {
        e.stopPropagation();
        const componentType = $(this).data('type');
        $('#modal-component-type').val(componentType);
        $('#ai-prompt').val('');
        $('#ai-result').hide();
        $('#ai-loading').hide();
        $('#ai-generate-modal').modal('show');
      });

      // 确认AI生成
      $(document).on('click', '#confirm-ai-generate', function() {
        const componentType = $('#modal-component-type').val();
        const prompt = $('#ai-prompt').val();
        
        $('#ai-loading').show();
        $('#ai-result').hide();
        
        // 模拟AI生成请求
        setTimeout(function() {
          // 模拟AI生成结果
          const mockResult = {
            type: componentType,
            name: 'AI生成的' + getComponentName(componentType),
            styles: {
              background: '#f8f9fa',
              padding: '40px 0'
            },
            content: {
              title: '这是AI生成的标题',
              description: '这是AI生成的描述内容，通过智能算法自动生成。'
            }
          };
          
          $('#ai-loading').hide();
          $('#ai-result-data').text(JSON.stringify(mockResult, null, 2));
          $('#ai-result').show();
          
          // 这里可以添加保存AI生成结果的逻辑
        }, 1500);
      });
      
      // 辅助函数：获取组件名称
      function getComponentName(type) {
        const names = {
          navbar: '导航栏',
          hero: '英雄区域',
          services: '服务模块',
          cases: '成功案例',
          about: '关于我们',
          team: '团队介绍',
          stats: '数据统计',
          pricing: '价格方案',
          faq: '常见问题',
          contact: '联系方式',
          subscribe: '订阅模块',
          footer: '页脚'
        };
        return names[type] || type;
      }
      
      // 渲染组件列表函数
      function renderComponents() {
        const container = $('#components-container');
        container.empty();
        
        components.forEach(component => {
          const cardHtml = `
            <div class="col-md-4 mb-4">
              <div class="component-card card" data-type="${component.type}">
                <div class="card-body text-center">
                  <div class="component-icon">
                    <i class="fa fa-${component.icon || 'puzzle-piece'}"></i>
                  </div>
                  <h3 class="card-title">${component.name}</h3>
                  <div class="form-check mt-3">
                    <input type="checkbox" name="components[]" value="${component.type}" class="form-check-input component-checkbox" id="${component.type}">
                    <label class="form-check-label" for="${component.type}">选择此组件</label>
                  </div>
                  <!-- AI生成按钮 -->
                  <button type="button" class="btn btn-sm btn-outline-purple mt-2 ai-generate-btn" data-type="${component.type}">
                    <i class="fa fa-magic mr-1"></i> AI生成
                  </button>
                </div>
              </div>
            </div>
          `;
          container.append(cardHtml);
        });
      }
      $('#confirm-ai-generate').click(function() {
        const componentType = $('#modal-component-type').val();
        const prompt = $('#ai-prompt').val();
        
        // 显示加载状态
        $('#ai-loading').show();
        $('#ai-result').hide();
        
        // 模拟AI生成请求
        $.ajax({
          url: '/website/aiGenerateComponent',
          type: 'POST',
          data: {
            type: componentType,
            params: {
              prompt: prompt
            }
          },
          success: function(response) {
            if (response.code === 0) {
              // 显示生成结果
              $('#ai-result-data').text(JSON.stringify(response.data, null, 2));
              $('#ai-result').show();
            } else {
              alert(response.message);
            }
          },
          error: function() {
            alert('生成失败，请稍后重试');
          },
          complete: function() {
            // 隐藏加载状态
            $('#ai-loading').hide();
          }
        });
      });

      // 全选功能
      $('#select-all').click(function() {
        $('.component-checkbox').prop('checked', true);
        $('.component-card').addClass('selected');
      });

      // 取消全选功能
      $('#deselect-all').click(function() {
        $('.component-checkbox').prop('checked', false);
        $('.component-card').removeClass('selected');
      });

      // 表单提交
      $('#website-generator-form').submit(function(e) {
        // 选中的组件
        const selectedComponents = $('.component-checkbox:checked').map(function() {
          return $(this).val();
        }).get();
        
        if (selectedComponents.length === 0) {
          alert('请至少选择一个组件');
          e.preventDefault();
          return false;
        }
        
        // 显示加载状态
        const $submitBtn = $(this).find('button[type="submit"]');
        const originalText = $submitBtn.html();
        $submitBtn.html('<i class="fa fa-spinner fa-spin mr-2"></i> 正在生成...');
        $submitBtn.prop('disabled', true);
      });
    });
  </script>
</body>
</html>